<template>
    <el-card class="box-card">

        <el-tabs v-model="state.activeName" @tab-click="handleTabClick">
            <el-tab-pane label="日志记录" name="record">
                <el-row style="margin-bottom: 15px;">
                    <el-button type="danger" :icon="Delete" @click="clearLog">清空日志</el-button>
                </el-row>
                <el-table :data="state.tableData" :empty-text="state.empty">
                    <el-table-column type="selection" width="38" />
                    <el-table-column prop="user" label="用户" show-overflow-tooltip />
                    <el-table-column prop="module" label="模块" show-overflow-tooltip />
                    <el-table-column prop="controller" label="控制器" show-overflow-tooltip />
                    <el-table-column prop="action" label="操作" show-overflow-tooltip />
                    <el-table-column prop="method" label="请求方式" show-overflow-tooltip />
                    <el-table-column prop="type" label="资源类型" show-overflow-tooltip />
                    <el-table-column prop="url" label="请求网址" show-overflow-tooltip />
                    <el-table-column prop="ip" label="请求IP" show-overflow-tooltip />
                    <el-table-column prop="param" label="请求参数" show-overflow-tooltip />
                    <el-table-column prop="agent" label="用户代理" show-overflow-tooltip />
                    <el-table-column prop="referer" label="请求来路" show-overflow-tooltip />
                    <el-table-column prop="atime" label="记录时间" width="168" align="center" />
                    <el-table-column fixed="right" label="操作" width="54" align="center">
                        <template #default="scope">
                            <el-popconfirm title="确定要删除吗？" @confirm="handleDelete(scope.row)">
                                <template #reference>
                                    <el-button link type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagination" hide-on-single-page background
                    layout="total, sizes,prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />

            </el-tab-pane>
            <el-tab-pane label="日志配置" name="config">

                <el-form :model="state.form" label-width="84px" style="width: 700px;">
                    <el-form-item label="记录日志">
                        <el-switch v-model="state.form.enable" :active-value="1" :inactive-value="0" />
                    </el-form-item>

                    <el-form-item label="记录登录">
                        <el-switch v-model="state.form.login" :active-value="1" :inactive-value="0" />
                    </el-form-item>

                    <el-form-item label="记录操作" v-if="state.form.enable">
                        <el-tree ref="actionTree" :data="state.actionData" node-key="id" :props="{ class: customNodeClass }"
                            show-checkbox>
                        </el-tree>
                    </el-form-item>


                    <el-form-item label="记录结果" v-if="state.form.enable">
                        <el-radio-group v-model="state.form.result">
                            <el-radio :label="0">不记录</el-radio>
                            <el-radio :label="1">记录全部</el-radio>
                            <el-radio :label="2">记录错误</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>

            </el-tab-pane>
        </el-tabs>

    </el-card>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import Request from '@/request'

const state = reactive({
    tableData: [],
    actionData: [],
    activeName: 'record',
    empty: '暂无数据',
    form: {
        enable: true,
        login: true,
        action: [],
        result: false,
    },
    total: 0,
    rows: 20,
    page: 1
})

const actionTree = ref()

const handleSizeChange = (value) => {
    state.rows = value
    getDataList()
}

const handleCurrentChange = (value) => {
    state.page = value
    getDataList()
}

const clearLog = () => {
    ElMessageBox.confirm(
        '确定要清空日志吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        Request
            .post('system/log/clear')
            .then(res => {
                if (!res.code) {
                    getDataList()
                }

                ElMessage({
                    message: res.message,
                    type: res.code ? 'error' : 'success'
                })
            })
            .catch((error) => {
                console.log('error', error)
            })
    }).catch(() => {

    })
}

const customNodeClass = (data, node) => {
    if (data.isOne) {
        return 'isOne'
    }

    if (data.isTwo) {
        return 'isTwo'
    }
    return null
}

const getConfig = () => {
    Request
        .get('system/role/rule')
        .then(res => {
            if (!res.code) {
                state.actionData = res.datas
                Request
                    .get('system/log/config')
                    .then(res => {
                        if (res.code) {
                            state.disabled = true
                        } else {
                            state.form = res.datas
                            nextTick(() => {
                                actionTree.value.setCheckedKeys(state.form.action)
                            })
                        }
                    })
                    .catch((error) => {
                        console.log("error", error)
                    })
            }
        })
        .catch((error) => {
            console.log('error', error)
        })

}

const onSubmit = () => {
    if (state.form.enable) {
        state.form.action = actionTree.value.getCheckedKeys(true)
    }

    Request
        .post('system/log/config', state.form)
        .then(res => {
            ElMessage({
                message: res.message,
                grouping: true,
                type: res.code ? 'error' : 'success'
            })
        })
        .catch((error) => {
            console.log("error", error)
        })
}


const handleTabClick = (tab) => {
    if (tab.index == 1) {
        getConfig()
    } else {
        getDataList()
    }
}


const getDataList = () => {
    Request
        .post('system/log/index', { page: state.page, rows: state.rows })
        .then(res => {
            if (res.code) {
                state.empty = res.message
            } else {
                state.tableData = res.datas.data
                state.total = res.datas.total
            }
        })
        .catch((error) => {
            console.log('error', error)
        })
}

getDataList()
</script>
<style>
.isOne>.el-tree-node__content {
    text-transform: capitalize;
    color: #409EFF;
}

.isTwo>.el-tree-node__content {
    color: #79bbff;
    text-transform: capitalize;
}

.el-tree-node.is-expanded.isTwo>.el-tree-node__children {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.isTwo>.el-tree-node__children>div {
    width: 25%;
}
</style>